JavaScript Best Practices — Destructuring

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at how to use the JavaScript destructuring syntax to our advantage.

Use Object Destructuring When Accessing and Using Multiple Properties of an Object

The destructuring syntax is great for setting multiple object properties to variables at the same time.

It saves us from creating temporary references to those properties.

For instance, instead of writing the following to assign our object properties to variable the old way:

const obj = {
  a: 1,
  b: 2
}

const a = obj.a;
const b = obj.b;

We can write the following:

const obj = {
  a: 1,
  b: 2
}

const {
  a,
  b
} = obj;

In the code above, we set the obj.a ‘s value to a and obj.b ‘s value to b with the destructuring syntax. It’s the same as the old way, which requires us to access the object properties individually.

The benefit is that we don’t have to reference obj in every line.

In both examples, we have the value of a being 1 and the value of b being 2.

It also works with function arguments. For instance, we can destructure object parameters into variables by writing the following:

const obj = {
  a: 1,
  b: 2
}

const add = ({
  a,
  b
}) => a + b;
const sum = add(obj);

In the code above, we have the same obj object with properties a and b . We also have the add function, which takes an object with properties a and b and returns the sum of them.

We then pass in obj as an argument of add . The destructuring syntax will then take the value of property a and set it as the value of parameter a and do the same for b .

Therefore, we get 3 as the return value in the example above.

Furthermore, we can do the same thing for objects in arrays. If we use the for...of loop, then we can use the object destructuring syntax as follows:

const arr = [{
    name: 'jane',
    age: 20
  },
  {
    name: 'joe',
    age: 22
  },
];

for (const {
    name,
    age
  } of arr) {
  console.log(name, age);
}

In the code above, we destructured our object in the first line of our for...of loop. We destructured the name and age properties of each entry of arr into the name and age loop variables is updated in each iteration.

Use Array Destructuring

Like with object destructuring, we can destructure arrays the same way. For instance, we can use it as follows:

const [a, b] = [1, 2];

In the code above, we set the variable values by the position that they’re in. So a is set to 1 and b is set to 2.

This is much better than assigning them to variables the old way, which is the following:

const arr = [1, 2];
const a = arr[0];
const b = arr[1];

As we can see, we’ve to write 3 lines to do the same thing. Plus we have to set a name for the array before getting the entries and assigning them to variables.

We didn’t have to do that with the destructuring syntax.

Likewise, we can do the destructure arrays in parameters. For instance, we can write the following code:

const add = ([a, b]) => a + b;
const sum = add([1, 2]);

In the code above, we destructured our array parameter in the add function into variables and return them added together.

Then we can call add with an array in the 2nd line to get the sum of them.

We can also use the syntax in the for...of loop as follows:

const arr = [
  ['a', 1], ['b', 2]
];
for (const [key, val] of arr) {
  console.log(key, val);
}

In the code above, we destructured our array entries in the for...of loop much like how we did it with the object destructuring syntax, so we get:

a 1
b 2

logged in the console.

Conclusion

The destructuring is great for destructuring objects and arrays. We can use it to destructure object property values into individual variables by matching their position and the identifier name.

With arrays, the destructuring is done by matching the position of the array entry with the position of the variable.